<template lang="pug">
div
  div.account_info
    div.info
      app-choose-image.avatar(:count="1",@change="changeAvatarHandler($event)")
        img(:src="avatar")
      div.txt
        span.fullname {{_.get(profile, 'fullname', '用户')}}
        span.quit(@click="quitHandler",v-if="!$helper.isWechat") [退出]
  .main-wrapper(ref="mainWrapper")
    .wrapper-content
      div.account_menu
        a(href="javascript:void(0)",@click="$router.push({ name: 'order:lists', params: { type: 'payment' } })") 待付款
        a(href="javascript:void(0)",@click="$router.push({ name: 'order:lists', params: { type: 'deliver' } })") 待发货
        a(href="javascript:void(0)",@click="$router.push({ name: 'order:lists', params: { type: 'harvest' } })") 待收货
        a(href="javascript:void(0)",@click="$router.push({ name: 'order:lists', params: { type: 'all' } })") 我的订单
      div.account_list
        div.page-part(style="margin-top: 15px")
          mt-cell(title="自定义订单",is-link)
            div(@click="$router.push({ name: 'quick:lists', params: { type: 'all' } })")
          mt-cell(title="我的收藏",is-link)
            div(@click="$router.push({ name: 'user:often' })")
          mt-cell(title="我的退货单",is-link)
            div(@click="$router.push({ name: 'order:lists', params: { type: 'returned' } })")
          mt-cell(title="地址管理",is-link)
            div(@click="$router.push({ name: 'user:address' })")
        div.page-part(style="margin-top: 15px")
          mt-cell(title="积分兑换",is-link)
            div(@click="$router.push({ name: 'user:integral' })")
        div.page-part(style="margin-top: 15px")
          mt-cell(title="服务政策",is-link)
            div(@click="$router.push({ name: 'user:policy' })")
          mt-cell(title="联系客服",is-link)
            div(@click="$router.push({ name: 'user:contact' })")
  app-footer(active="user",@handler="footerHandler")
  #customer-service(@click="$router.push('/user/contact')")
</template>

<script>
import BScroll from 'better-scroll'
import { Toast, Button, MessageBox, Cell } from 'mint-ui'
import Footer from 'components/Footer'
import Header from 'components/Header'
import ChooseImage from 'components/ChooseImage'
import { mapActions, mapGetters } from 'vuex'

export default {
  components: {
    'mt-button': Button,
    'mt-cell': Cell,
    'app-footer': Footer,
    'app-header': Header,
    'app-choose-image': ChooseImage
  },
  data () {
    return {
      avatar: this._.config['static_uri'] + '/img/default_avatar.png',
      mainScroll: null,
      scrolling: false
    }
  },
  computed: {
    ...mapGetters({
      profile: 'getProfile'
    })
  },
  watch: {
    profile: {
      handler: async function (val, oldval) {
        let avatar = this._.get(this.profile, 'avatar')
        if (avatar) {
          this.avatar = avatar
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      this._initScroll()
    })
  },
  methods: {
    ...mapActions({
      logout: 'logout',
      reloadProfile: 'reloadProfile'
    }),
    _initScroll () {
      if (!this.mainScroll) {
        this.$nextTick(() => {
          this.mainScroll = new BScroll(this.$refs.mainWrapper, {
            probeType: 1,
            click: true,
            scrollbar: {
              fade: true,
              interactive: false
            }
          })
          this.mainScroll.on('scrollStart', () => {
            this.scrolling = true
          })
          this.mainScroll.on('scrollEnd', () => {
            this.scrolling = false
          })
        })
      } else {
        this.$nextTick(() => {
          this.mainScroll.refresh()
        })
      }
    },
    async changeAvatarHandler (base64) {
      const result = await this.$rpc.invoke('user_avatar', [base64]).complete()
      if (!result.code) {
        Toast('修改头像完成')
        await this.reloadProfile()
      } else {
        Toast(result.message)
      }
      this.avatar = base64
    },
    settingHandler () {
      this.$router.push({name: 'user:setting'})
    },
    async quitHandler () {
      let action = await MessageBox.confirm('确定要退出?')
      if (action !== 'confirm') {
        return
      }
      let result = await this.logout()
      if (result.code === 0) {
        MessageBox.alert(result.message).then(action => {
          this.$router.push({name: 'loading'})
        })
      } else {
        Toast(result.message)
      }
    },
    footerHandler (type) {
      this.$router.push({name: type + ':index'})
    }
  }
}
</script>
<style lang="stylus" scoped>
.account_info
  height: 2.4667rem
  background-color: #c9121e
  padding: .3rem .32rem 0
  color: #fff
  box-sizing: border-box
  .info
    float: left
    height: 1.8667rem
    width: 7rem
    margin-top: 0.2rem
    .avatar
      float: left
      width: 1.5667rem
      height: 1.5667rem
      border-radius: 100%
      overflow: hidden
      margin-right: .2667rem
      background: #fff
      position: relative
      img
        display: block
        width: auto
        height: 100%
        position: absolute
        top: 50%
        left: 50%
        margin-left: -0.78335rem
        margin-top: -0.78335rem
    .txt
      height: 1.8667rem
      line-height: 1.3rem
      .fullname
        padding: 0 .3rem 0 0
      .quit
        cursor: pointer
        color: #aaa
.account_menu
  display: -webkit-box
  display: -webkit-flex
  display: flex
  height: 1.7rem
  background-color: #fff
  border-bottom: 1px solid #ededed
  margin-bottom: .2667rem
  box-sizing: border-box
  padding: 0.2rem 0
  a
    -webkit-box-flex: 1
    -webkit-flex: 1
    flex: 1
    text-align: center
    text-decoration: none
    color: #333
    font-size: 0.25rem
    &:nth-child(1):before
      background-position: -4rem -7rem
    &:nth-child(2):before
      background-position: -5rem -7rem
    &:nth-child(3):before
      background-position: -6rem -7rem
    &:nth-child(4):before
      background-position: -7rem -7rem
  a:before
    content: ''
    display: block
    width: 1rem
    height: 1rem
    margin: 0 auto

.main-wrapper
  background: #f5f6f0
  overflow: hidden
  position: absolute
  top: 2.4667rem
  bottom: 1.30rem
  left: 0
  right: 0

.account_list
  a.mint-cell
    display: block
    height: 100%
    padding: 0
    position: relative
    &:before
      content: '';
      position: absolute;
      width: .5333rem;
      height: .5333rem;
      top: 50%;
      left: 0.3rem;
      margin-top: -.2667rem;
  .page-part:nth-child(1)
    .mint-cell:nth-child(1):before
      background-position: -4rem -1rem
    .mint-cell:nth-child(2):before
      background-position: -5rem -1rem
    .mint-cell:nth-child(3):before
      background-position: -9rem -1rem
    .mint-cell:nth-child(4):before
      background-position: -6rem -1rem
  .page-part:nth-child(3)
    .mint-cell:nth-child(1):before
      background-position: -7rem -1rem
    .mint-cell:nth-child(2):before
      background-position: -8rem -1rem
  .page-part:nth-child(2)
    .mint-cell:nth-child(1):before
      background-position: -7rem 0rem
.main-wrapper a.mint-cell
  text-indent: 0.8rem

.mint-cell-value>div
  position: absolute
  left: 0
  right: 0
  top: 0
  bottom: 0
  display: block
  cursor: pointer


</style>
